<template>
  <div>
    <Header :config="config"></Header>
    <Navigation :config="config"></Navigation>
    <div class="banner">
      <img src="https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221114/831aacdab4dd4ace8810ce2ce4a07374.jpg" alt style="width: 100%;">
    </div>
    <div class="page-title">
      <span class="title">新闻分类</span>
    </div>
    <div class="khal-crumb">
      <div class="kc-center">
        <div class="kcc-list">
          <a v-for="(item,index) in crumbs" :key="index" :href="item.href ? item.href : 'javascript:void(0);'" class="kccl-a" :class="item.href ? '' : 'noafter'">{{ item.title }}</a>
        </div>
      </div>
    </div>
    <div class="xwzx-type">
      <div class="xt-center">
        <ul class="xtc-ul">
          <li v-for="item in typeData" :key="item.id" class="xtcu-li" :class="item.typeAliases==newsTypeAliases ? 'on' : ''">
            <a :href="item.href">{{ item.typeName }}</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="xwzx-list">
      <div class="xl-center">
        <div class="xlc-list">
          <ul class="xlc-ul">
            <li class="xlcu-li" v-for="item in listData" :key="item.id">
              <a class="cover" target="_blank" :href="item.href" :title="item.title">
                <el-image :src="item.images" :alt="item.title" lazy></el-image>
              </a>
              <div class="item">
                <div class="title">
                  <a target="_blank" :href="item.href" :title="item.title">{{ item.title }}</a>
                </div>
                <div class="date-view">
                  <div class="date">更新于：{{ item.addTimeNow }}</div>
                  <div class="view">{{ item.views || 0 }}人浏览</div>
                </div>
                <div class="desc">
                  <a target="_blank" :href="item.href" :title="item.subtitle">{{ item.subtitle }}</a>
                </div>
                <div class="label" v-show="item.caseTypeAliases">
                  <a target="_blank" :href="`${config.domain}/khal/${item.caseTypeAliases}/`" class="l-a">{{ item.caseTypeName }}</a>
                </div>
                <div class="tool">
                  <div class="t-btn wxzx">
                    <a href="javascript:void(0);" class="wxzx-a">微信咨询</a>
                    <div class="qrcode">
                      <img src="https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221104/3b1e84bf37e340b7b6c4d4585535f988.jpg" alt>
                    </div>
                  </div>
                  <a href="javascript:void(0);" class="t-btn zxyy">在线预约</a>
                </div>
              </div>
            </li>
          </ul>
          <div class="null" v-if="listData.length < 1">
            <img src="https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221115/1d9127c255e443339c89aa67c36acc2a.png" alt="暂无数据" class="n-cover">
            <p class="n-text">暂无数据</p>
          </div>
          <div class="page" v-if="listData.length > 0">
            <div class="p-list">
              <a :href="pageData.prev.on ? pageData.prev.href : 'javascript:void(0);'" class="pl-a" :class="pageData.prev.on ? '' : 'disabled'">&lt;&lt;</a>
              <a v-for="(item,index) in pageData.list" :key="index" :href="item.num==pageNum ? 'javascript:void(0);' : item.href" class="pl-a" :class="item.num==pageNum ? 'on' : ''">{{ item.num }}</a>
              <a :href="pageData.next.on ? pageData.next.href : 'javascript:void(0);'" class="pl-a" :class="pageData.next.on ? '' : 'disabled'">&gt;&gt;</a>
            </div>
          </div>
        </div>
        <div class="xlc-right">
          <div class="xlcr-list">
            <div class="xlcrl-title">
              <i class="icon"></i>
              <p class="text">{{ (newsTypeAliases&&relevantCaseData.length)>0 ? '相关案例' : '更多案例' }}</p>
            </div>
            <ul class="xlcrl-ul">
              <li class="xlcrlu-li" v-for="item in relevantCaseData" :key="item.id">
                <a target="_blank" :href="item.href" class="l-a" :title="item.title">{{ item.title }}</a>
              </li>
            </ul>
          </div>
          <div class="xlcr-label">
            <a target="_blank" v-for="item in caseTypeData" :key="item.id" :href="item.href" class="xlcrl-a" :title="item.typeName">{{ item.typeName }}</a>
          </div>
          <div class="r-type">
            <div class="rt-title">
              <i class="icon"></i>
              <p class="text">在线留言</p>
            </div>
            <form class="rt-form">
              <input class="f-input" type="text" name="fullName" placeholder="请输入您的姓名">
              <input class="f-input" type="text" name="phone" maxlength="11" placeholder="请输入您的电话">
              <textarea class="f-textarea" name="content" placeholder="请简单描述您的需求"></textarea>
              <button type="button" class="f-save" :disabled="formDisabled" @click="formSave">立即提交</button>
            </form>
          </div>
        </div>
      </div>
    </div>
    <Footer :config="config"></Footer>
  </div>
</template>

<script>
var title = ''
var description = ''
var keywords = ''
import u from '@/plugins/public'
export default {
  validate(ctx) {
    return /^\/xwzx\/((?:[^\/]+?))(?:\/(?=$))?\/$/i.test(ctx.route.fullPath)
  },
  async asyncData(ctx) {
    // 设置导航选中
    ctx.config.navData[6].on = true

    // 获取路径参数
    var pageNum = 1
    var newsTypeAliases = ''
    let parameArr = ctx.params.id ? ctx.params.id.split('-') : null
    if (parameArr) {
      // 路径一个值
      if (parameArr.length == 1) {
        // 分页
        if (/^p\d+$/.exec(parameArr[0])) {
          pageNum = parameArr[0].split('p')[1]
        }
        // 类型
        else if (/^[a-z]+$/.exec(parameArr[0])) {
          newsTypeAliases = parameArr[0]
        }
        else {
          ctx.status = 404
        }
      }
      // 路径两个值
      else if (parameArr.length == 2) {
        // 开头必须是类型
        if (/^[a-z]+$/.exec(parameArr[0])) {
          newsTypeAliases = parameArr[0]
          // 分页
          if (/^p\d+$/.exec(parameArr[1])) {
            pageNum = parameArr[1].split('p')[1]
          } else {
            ctx.status = 404
          }
        } else {
          ctx.status = 404
        }
      } else {
        ctx.status = 404
      }
    }

    // TDK
    title = `新闻资讯-提供实时网站建设、seo优化新闻${pageNum>1 ? '第'+pageNum+'页' : ''}-纺扬科技`
    description = '纺扬网站建设专业网站建设，网站设计，网站建设公司，网站制作，网页设计，先设计后付费，已为上千家服务，为深圳、广州、北京、上海和全国各地企业和个人服务，联系电话：（☏:191-0267-1826）'
    keywords = '新闻资讯,纺扬网站建设'

    // 面包屑
    var crumbs = [{
      title: '纺扬科技',
      href: `${ctx.config.domain}/`
    }, {
      title: '新闻资讯',
      href: ''
    }]

    // 获取新闻类型
    var typeData = []
    let getType = await u.http({
      url: ctx.store.state.queryNewsTypeList,
      params: {
        pageNum: 1,
        pageSize: 6
      }
    })
    if (getType.code == 200) {
      typeData = getType.data.list
      typeData.forEach(item => {
        if (item.typeAliases == newsTypeAliases) {
          crumbs[1].href = `${ctx.config.domain}/xwzx/`
          crumbs.push({
            title: item.typeName,
            href: ''
          })
          // TDK
          title = item.seoTitle.replace(/{分页}/gi, pageNum>1 ? `第${pageNum}页` : '')
          description = item.seoDesc
          keywords = item.seoKeyword
        }
        item.href = `${ctx.config.domain}/xwzx/${item.typeAliases}/`
      })
    }

    // 获取列表
    var listData = []
    var pageData = {}
    let getList = await u.http({
      url: ctx.store.state.queryNewsList,
      params: {
        pageNum,
        pageSize: 20,
        newsTypeAliases
      }
    })
    if (getList.code == 200) {
      listData = getList.data.list
      // 上一页
      let pagePrev = getList.data.prePage
      let hrefPrev = `${ctx.config.domain}/xwzx/p${pagePrev}/`
      if (newsTypeAliases) {
        hrefPrev = `${ctx.config.domain}/xwzx/${newsTypeAliases}-p${pagePrev}/`
      }
      let pageDataPrev = {
        on: pagePrev < 1 ? false : true,
        href: hrefPrev
      }
      // 下一页
      let pageNext = getList.data.nextPage
      let hrefNext = `${ctx.config.domain}/xwzx/p${pageNext}/`
      if (newsTypeAliases) {
        hrefNext = `${ctx.config.domain}/xwzx/${newsTypeAliases}-p${pageNext}/`
      }
      let pageDataNext = {
        on: pageNext < 1 ? false : true,
        href: hrefNext
      }
      // 重组分页路径
      let pageDataList = []
      getList.data.navigatepageNums.forEach(item => {
        let href = `${ctx.config.domain}/xwzx/p${item}/`
        if (newsTypeAliases) {
          href = `${ctx.config.domain}/xwzx/${newsTypeAliases}-p${item}/`
        }
        pageDataList.push({
          num: item,
          href
        })
      })
      pageData = {
        prev: pageDataPrev,
        next: pageDataNext,
        list: pageDataList
      }

      listData.forEach(item => {
        item.addTimeNow = u.formatTime(item.addTime, 'Y-m-d H:i:s')
        item.href = `${ctx.config.domain}/xwzxxq/${item.id}.html`
      })
    }

    // 筛选类型数据
    var caseTypeData = []
    let getCaseType = await u.http({
      url: ctx.store.state.queryCaseTypeList,
      params: {
        pageNum: 1,
        pageSize: 6
      }
    })
    if (getCaseType.code == 200) {
      caseTypeData = getCaseType.data.list
      caseTypeData.forEach(item => {
        item.href = `${ctx.config.domain}/khal/${item.typeAliases}/`
      })
    }

    // 获取相关案例
    var relevantCaseData = []
    let getRelevantCase = await u.http({
      url: ctx.store.state.queryCaseList,
      params: {
        pageNum: 1,
        pageSize: 10,
        caseTypeAliases: newsTypeAliases
      }
    })
    if (getRelevantCase.code == 200) {
      relevantCaseData = getRelevantCase.data.list
      relevantCaseData.forEach(item => {
        item.href = `${ctx.config.domain}/khalxq/${item.id}.html`
      })
    }

    return {
      config: ctx.config,
      crumbs,
      typeData,
      pageNum,
      newsTypeAliases,
      listData,
      pageData,
      caseTypeData,
      relevantCaseData
    }
  },
  head() {
    return {
      title,
      meta: [
        { hid: 'description', name: 'description', content: description },
        { hid: 'keywords', name: 'keywords', content: keywords }
      ]
    }
  },
  data() {
    return {
      fullName: '',
      phone: '',
      weChat: '',
      demand: '',
      budget: '',
      content: '',
      formDisabled: false
    }
  },
  methods: {
    // 表单提交
    formSave() {
      if (this.phone == '') {
        this.$message({
          message: '请输入您的电话号码',
          type: 'warning'
        })
        return false
      }
      if (!/^1[3456789]\d{9}$/.test(this.phone)) {
        this.$message({
          message: '您的号码格式有误',
          type: 'warning'
        })
        return false
      }
      this.formDisabled = true
      this.$axios({
        url: this.$store.state.addMessageBoard,
        method: 'POST',
        headers: {
          'Content-Type':'application/x-www-form-urlencoded'
        },
        params: {
          fullName: this.fullName,
          phone: this.phone,
          weChat: this.weChat,
          demand: this.demand,
          budget: this.budget,
          content: this.content,
          ip: this.config.ip,
          pathUrl: this.config.domain + this.$route.fullPath
        }
      }).then(({ data }) => {
        if (data.code == 200) {
          this.$message({
            message: data.msg,
            type: 'success'
          })
          this.fullName = ''
          this.phone = ''
          this.weChat = ''
          this.demand = ''
          this.budget = ''
          this.content = ''
          this.formDisabled = false
          return false
        }
        this.$message({
          message: data.msg,
          type: 'error'
        })
        this.formDisabled = false
      }).catch(err => {
        this.$message({
          message: err,
          type: 'error'
        })
        this.formDisabled = false
      })
      return false
    }
  }
}
</script>

<style>
  body {
    background-color: #f5f5f5;
  }
</style>